<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>人口流动</title>
  <script type="text/javascript" src="js/echarts.js"></script>
  <script type="text/javascript" src="js/echarts-liquidfill.js"></script>
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <link rel="stylesheet" href="css/style_hcb.css" />
</head>

<body style="background: transparent;">
  <div id='xxkmap' style="width:800px;height:375px;"></div>

  <script>
    var areaName = getQueryString('area') || '江苏省';
    $(function () {
      var code = '';
      var message = '';
      var url = "json/getProvince.json";
      $.ajax({
        type: 'get',
        url: url,
        dataType: 'json',
        async: false,
        success: function (data) {
          var result = data;
          var china = "json/china-province.json";

          var myChart = echarts.init(document.getElementById('xxkmap'));
          $.get(china, function (tjJson) {
            echarts.registerMap('china', tjJson);
            myChart.setOption({
              series: [{
                type: 'map',
                map: 'china'
              }]
            });

            var geoCoordMap = {
              '黑龙江': [126.1445, 48.7156],
              '内蒙古自治区': [112.5977, 44.3408],
              "吉林省": [125.7746, 43.5938],
              '北京市': [116.4551, 40.2539],
              "辽宁省": [122.0438, 41.0889],
              "河北省": [115.4004, 39.4688],
              "天津市": [117.4219, 39.4189],
              "山西省": [112.4121, 37.6611],
              "陕西省": [109.5996, 35.7396],
              "甘肃省": [99.7129, 38.166],
              "宁夏回族自治区": [105.9961, 37.3096],
              "青海省": [95.2402, 35.4199],
              "新疆维吾尔自治区": [84.9023, 42.148],
              "西藏自治区": [87.8695, 31.6846],
              "四川省": [101.9199, 30.1904],
              "重庆市": [107.7539, 30.1904],
              "山东省": [118.7402, 36.4307],
              "河南省": [113.0668, 33.8818],
              "江苏省": [118.8586, 32.915],
              "安徽省": [117.2461, 32.0361],
              "湖北省": [112.2363, 31.1572],
              "浙江省": [120.498, 29.0918],
              "福建省": [118.3008, 25.9277],
              "江西省": [116.0156, 27.29],
              "湖南省": [111.5332, 27.3779],
              "贵州省": [106.6113, 26.9385],
              "云南省": [101.0652, 25.1807],
              "广东省": [113.4668, 22.8076],
              "广西壮族自治区": [107.7813, 23.6426],
              "海南省": [109.9512, 19.2041],
              '台湾省': [120.0254, 23.5986],
              '香港特别行政区': [114.1178, 22.3242],
              '澳门特别行政区': [111.5547, 22.1484],
              '上海市': [121.4648, 31.2891],
              // '徐霞客镇': [120.33471700000001, 31.717340999999998],
            };
            geoCoordMap[areaName] = [120.33471700000001, 31.717340999999998];

            var goData = result;
            goData.push({
              name: areaName,
              value: 0
            });

            var planePath = 'arrow';

            var convertData = function (name, data) {
              var res = [];
              for (var i = 0; i < data.length; i++) {
                var fromCoord = geoCoordMap[name];
                var toCoord = geoCoordMap[data[i].name];
                if (fromCoord && toCoord) {
                  res.push({
                    //对换即可调整方向
                    coords: [toCoord, fromCoord]
                  });
                }
              }
              return res;
            };

            var series = [];
            [
              [areaName, goData],

            ].forEach(function (item, i) {
              series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                //线特效配置
                effect: {
                  show: true,
                  period: 8,
                  trailLength: 0.02,
                  symbol: planePath, //标记类型
                  symbolSize: 5,
                },
                lineStyle: {
                  normal: {
                    width: .3,
                    opacity: .5,
                    curveness: .4, //弧线角度
                    color: '#fff',
                    //color: '#16ffe4'
                  }
                },
                data: convertData(item[0], item[1])
              }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                //							rippleEffect: { //涟漪特效
                //								period: 4, //动画时间，值越小速度越快
                //								brushType: 'stroke', //波纹绘制方式 stroke, fill
                //								scale: 4 //波纹圆环最大限制，值越大波纹越大
                //							},
                label: {
                  show: false,
                  normal: {
                    show: false,
                    position: 'right', //显示位置
                    offset: [0, 0], //偏移设置
                    formatter: function (params) { //圆环显示文字
                      return params.data.name;
                    },
                    fontSize: 13
                  },
                  emphasis: {
                    show: false,
                  }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                  if (val[2] < 100) {
                    return 4;
                  }
                  if (val[2] < 1000) {
                    return 8;
                  } else {
                    return 10; //圆环大小
                  }
                  //
                },
                itemStyle: {
                  normal: {
                    show: false,
                    color: '#0000fe'
                  }
                },
                data: item[1].map(function (dataItem) {
                  //console.log(dataItem)
                  return {
                    name: dataItem.name,
                    value: geoCoordMap[dataItem.name].concat([dataItem.value])
                  };
                })

              }, { //终点
                name: 'item[0]',
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 20,
                tooltip: {
                  show: false,
                },
                rippleEffect: {
                  period: 4,
                  brushType: 'stroke',
                  scale: 4
                },
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: true,
                    position: 'right',
                    offset: [0, 35], //偏移设置
                    color: '#f5000c',
                    formatter: '{b}',
                    textStyle: {
                      fontWeight: 'bold',
                      fontSize: 14,
                      color: "#16ffe4"
                    }
                  }
                },
                symbolSize: 20,
                symbol: 'pin',
                data: [{
                  name: item[0],
                  value: geoCoordMap[item[0]].concat([100])
                }]
              })
            });
            //							var type = {
            //								type: 'map',
            //								map: 'china',
            //								geoIndex: -2,
            //								label: {
            //									normal: {
            //										show: false
            //									},
            //									emphasis: {
            //										show: false
            //									}
            //								},
            //								data: goData,
            //							};
            //							series.unshift(type);
            option = {
              selectedMode: 'single',
              //backgroundColor: '#0c1f49',
              title: {
                show: false,
              },
              tooltip: {
                //enterable: true,
                trigger: 'item',
                formatter: function (params) {
                  var pname = params.name;
                  for (i = 0; i < result.length; i++) {
                    if (pname == result[i].name) {
                      var info = "";
                      info += "<li>省份：" + result[i].name + "</li><li>人口:" + result[i].value + "</li>";
                    }
                  }
                  //console.log(info);
                  return info;
                }

              },

              //地图相关设置
              geo: {
                map: 'china',
                //视角缩放比例
                zoom: 1.2,
                //显示文本样式
                label: {
                  show: false,
                  normal: {
                    show: false,
                    textStyle: {
                      color: '#01e3f9'
                    }
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '0b33ad'
                    }
                  }
                },
                left: '10%',
                right: '10%',
                top: '10%',
                bottom: '10%',
                //鼠标缩放和平移
                //roam: true,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    borderColor: '#7ca4df',
                    borderWidth: 1,
                    areaColor: '#1d74dd'
                  },
                  emphasis: {
                    label: {
                      show: true
                    },
                    areaColor: '#88d6fa',
                    borderWidth: 0
                  }
                },
              },
              series: series
            };
            myChart.on('hover', function (params) {

              var pname = params.name;
              for (i = 0; i < result.length; i++) {
                if (pname == result[i].name) {

                  var info = "";
                  info += "<li>省份：" + result[i].name + "</li><li>人口流动:" + result[i].value +
                    "</li><br />";
                }
              }
              //console.log(info);
              return info;
            });
            myChart.setOption(option);
          })

        }
      });

    })

  </script>
</body>

</html>
